
import { NavBar, Toast } from '@nutui/nutui-react'
import { ArrowLeft } from '@nutui/icons-react'
import { ClosedEye, EyeO } from '@react-vant/icons';
import { useLocation, useNavigate } from 'react-router-dom';
import { http } from '../../utils'
import { ConfigProvider, Button, Notify } from '@nutui/nutui-react'
import { useState } from 'react';
import { Input, } from 'react-vant';
const PutNewPassword = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const [inputVal, setInputVal] = useState('')
    const [isInputPass, setIsInputPass] = useState(false)
    const handleSubmit = async () => {
        let regex = /^[A-Za-z0-9]{6,20}$/
        if(!regex.test(inputVal)){
            Notify.warn('密码格式错误，请重新尝试', { duration: 1000 })
        }
        let res = await http.post('/main/putUser', { password: inputVal })
        if (res.code == 200) {
            localStorage.removeItem('accessToken')
            localStorage.removeItem('refreshToken')
            navigate('/loginCode')
        } else {
            Notify.warn('密码错误，请重新尝试', { duration: 1000 })
        }
    }

    const darkTheme = {
        nutuiNavbarBackground: '#ffffff',
        nutuiInputPadding: '0.1rem 0',
        nutuiInputFontSize: '0.18rem',
        nutuiButtonDefaultHeight: "0.4rem"
    };
    return (
        <div style={{ paddingTop: "0.15rem" }}>
            <ConfigProvider theme={darkTheme}>
                <NavBar
                    back={<ArrowLeft />}
                    onBackClick={(e) => navigate('/outlet/accountSafety')}
                >
                </NavBar>
                <div style={{ marginTop: "0.2rem", padding: "0 0.4rem" }}>
                    <h2 style={{ fontSize: "0.3rem" }}>设置新登录密码</h2>
                    <p style={{ fontSize: '0.12rem', color: "#9f9f9f", marginTop: "0.1rem", marginBottom: "0.4rem" }}>
                        请输入新密码，并重新登录验证
                    </p>
                </div>
                <div style={{ marginTop: "1rem", padding: "0 0.4rem" }}>
                    <Input
                        placeholder="请输入6-20位字母与数字的组合"
                        onChange={(value) => setInputVal(value)}
                        value={inputVal}
                        type={isInputPass ? 'text' : 'password'}
                        suffix=
                        {
                            isInputPass ?
                                <EyeO onClick={() => setIsInputPass(!isInputPass)} />
                                :
                                <ClosedEye onClick={() => setIsInputPass(!isInputPass)} />
                        }
                    />
                </div>
                <div style={{ marginTop: "0.3rem", padding: "0 0.4rem" }}>
                    <Button
                        type="default"
                        color='linear-gradient(to right, #ff9600 , #fe4801)'
                        block
                        onClick={handleSubmit}
                    >
                        确定
                    </Button>
                </div>
            </ConfigProvider>

        </div>
    )
}
export default PutNewPassword;




